<template>
	
		
			<!-- <view class="status_bar">
			           
			</view>
			<view class="box-bg">
				<uni-nav-bar shadow left-icon="left" leftText="返回"  title="好友申请列表" @clickLeft="topLeftClick()" />
			</view> -->
			
			
			<uni-list :border="true" v-for="item in unfriendList"  >
			<!-- 头像显示圆点 -->
				<uni-list-chat badge-text="dot" avatar="imageUrl+item.friendPortrait" :title="item.friendNickName" clickable @click="clickChat(item)"  note="对方发来好友申请" badge-positon="left" ></uni-list-chat>
	
				
			<!-- 	<uni-list-chat title="柯南" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="葫芦娃" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="王嘚嘚" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="刘嘚嘚" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="图里里" avatar="../../static/pig.pngg" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="奶酪" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				<uni-list-chat title="脱落" avatar="../../static/pig.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
				 -->
				
				<!-- 自定义右侧内容 -->
				
			<!-- 	<uni-list-chat title="群分享" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
					<view class="chat-custom-right">
						<text class="chat-custom-text">刚刚</text>
						
						<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
					</view>
				</uni-list-chat> -->
			</uni-list>
	
		
		
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="添加好友"  
					placeholder="请输入好友手机号" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
				
		<!-- 		
		<uni-fab ref="fab" :pattern="pattern" :content="toolsContent" :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @trigger="trigger" /> -->
</template>

<script>
	import store from '@/store/index.js';//需要引入store
	import constant from '@/store/constant.js'
	
	const baseImageUrl=constant.baseImageUrl;
	export default {
		computed:{
			unfriendList(){
				return store.state.friend.unfriendList
			},
			
			toolsContent(){
				return store.state.common.toolsContent
			},
		},
		components: {},
		onLoad() {
			//加载新闻通知数据
			store.dispatch('loadFriendData',{})
			// uni.startPullDownRefresh();
			
			
		},
		data() {
			return {
				
				imageUrl:baseImageUrl,
				avatarList: [{
					url: '../../static/pig.png'
				}, {
					url: '../../static/pig.png'
				}, {
					url: '../../static/pig.png'
				}],
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				
			}
		},
		methods: {
			clickChat(item){
					uni.showModal({
						title: '好友申请',
						content: '是否同意好友申请',
						cancelText:"拒绝",
						confirmText:"同意",
						success: function (res) {
							
							var data={
								"id":item.id
							};
							
							if (res.confirm) {
								data.status=1;
								
							} else if (res.cancel) {
								
								data.status=2;
							}
							store.dispatch('updateStatusData',data).then(()=>{
								
								uni.showToast({
									icon: 'none',
									title: "处理成功" 
								})
							});
						}
					});
				
				
			},
			trigger(e) {
				
				
				this.toolsContent[e.index].active = !e.item.active
				store.dispatch('toolsJump',e.item.value)
			},
			topLeftClick(){
				uni.navigateTo({
					url:"/pages/friend/friend"
				})
			},
			topRightClick(){
				this.$refs.inputDialog.open()
				
				
			},
			
		}
	}
</script>

<style>
	/* $nav-height: 30px; */
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
		.box-bg {
			background-color: #F5F5F5;
			padding: 5px 0;
		}
	
		.city {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			/* // width: 160rpx; */
			margin-left: 4px;
		}
	
		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			/* // width: 500rpx; */
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
		}
	
		.input-uni-icon {
			line-height: $nav-height;
		}
	
		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}
</style>